

<h3 mat-dialog-title class="mb-3">Embed AI Chatbot on your website</h3>

<div mat-dialog-content class="content pb-2">

  <div class="row">

    <mat-form-field class="col-6">
      <span
        matPrefix
        matTooltip="Header of chat window"
        class="d-flex flex-nowrap align-items-center justify-content-between me-2">
        <mat-icon>edit</mat-icon>
        <span class="text-muted">|</span>
      </span>
      <input
        matInput
        placeholder="Header  ..."
        spellcheck="false"
        [(ngModel)]="header"
        autocomplete="off">
    </mat-form-field>

    <mat-form-field class="col-6">
      <span
        matPrefix
        matTooltip="Popup description"
        class="d-flex flex-nowrap align-items-center justify-content-between me-2">
        <mat-icon>edit</mat-icon>
        <span class="text-muted">|</span>
      </span>
      <input
        matInput
        placeholder="Popup  ..."
        spellcheck="false"
        [(ngModel)]="popup"
        autocomplete="off">
    </mat-form-field>

    <mat-form-field class="col-6">
      <span
        matPrefix
        matTooltip="Button text, defaults to chat icon"
        class="d-flex flex-nowrap align-items-center justify-content-between me-2">
        <mat-icon>touch_app</mat-icon>
        <span class="text-muted">|</span>
      </span>
      <input
        matInput
        placeholder="Button text ..."
        spellcheck="false"
        [(ngModel)]="buttonTxt"
        autocomplete="off">
    </mat-form-field>

    <mat-form-field class="col-6">
      <span
        matPrefix
        matTooltip="Textbox placeholder"
        class="d-flex flex-nowrap align-items-center justify-content-between me-2">
        <mat-icon>edit</mat-icon>
        <span class="text-muted">|</span>
      </span>
      <input
        matInput
        placeholder="Textbox placeholder ..."
        spellcheck="false"
        [(ngModel)]="textboxPlaceholder"
        autocomplete="off">
    </mat-form-field>

  </div>

  <div class="row">
    <mat-form-field class="col-3">
      <span
        matPrefix
        matTooltip="Theme to use"
        class="d-flex flex-nowrap align-items-center justify-content-between me-2">
        <mat-icon>palette</mat-icon>
        <span class="text-muted">|</span>
      </span>
      <mat-select
        [(ngModel)]="modernTheme"
        placeholder="Theme ...">
        <mat-option
          *ngFor="let idx of modernThemes"
          [value]="idx">
          {{idx}}
        </mat-option>
      </mat-select>
    </mat-form-field>

    <mat-form-field class="col-3">
      <span
        matPrefix
        matTooltip="Positioning of the chatbot"
        class="d-flex flex-nowrap align-items-center justify-content-between me-2">
        <mat-icon>place</mat-icon>
        <span class="text-muted">|</span>
      </span>
      <mat-select
        [(ngModel)]="positioning"
        placeholder="Positioning ...">
        <mat-option value="right">
          Bottom Right
        </mat-option>
        <mat-option value="left">
          Bottom Left
        </mat-option>
      </mat-select>
    </mat-form-field>

    <mat-form-field class="col-3">
      <span
        matPrefix
        matTooltip="Animations on chatbot"
        class="d-flex flex-nowrap align-items-center justify-content-between me-2">
        <mat-icon>place</mat-icon>
        <span class="text-muted">|</span>
      </span>
      <mat-select
        [(ngModel)]="animations"
        placeholder="Animations ...">
        <mat-option value="none">
          No animation
        </mat-option>
        <mat-option value="ainiro_blink">
          Blink
        </mat-option>
      </mat-select>
    </mat-form-field>

    <mat-form-field class="col-3">
      <span
        matPrefix
        matTooltip="Meta filtering value for RAG training snippets"
        class="d-flex flex-nowrap align-items-center justify-content-between me-2">
        <mat-icon>edit</mat-icon>
        <span class="text-muted">|</span>
      </span>
      <input
        matInput
        placeholder="Meta filtering value ..."
        spellcheck="false"
        [(ngModel)]="meta"
        autocomplete="off">

    </mat-form-field>

  </div>

  <div class="d-flex justify-content-md-between align-items-md-center align-items-end">

    <mat-form-field class="me-2">
      <span
        matPrefix
        matTooltip="Background color primary"
        class="d-flex flex-nowrap align-items-center justify-content-between me-2">
        <mat-icon>palette</mat-icon>
        <span class="text-muted">|</span>
      </span>
      <input
        matInput
        [(colorPicker)]="startColor"
        [style.background]="startColor"/>
    </mat-form-field>

    <mat-form-field class="me-2">
      <span
        matPrefix
        matTooltip="Background color secondary"
        class="d-flex flex-nowrap align-items-center justify-content-between me-2">
        <mat-icon>palette</mat-icon>
        <span class="text-muted">|</span>
      </span>
      <input
        matInput
        [(colorPicker)]="endColor"
        [style.background]="endColor"/>
    </mat-form-field>

    <mat-form-field class="me-2">
      <span
        matPrefix
        matTooltip="Text color"
        class="d-flex flex-nowrap align-items-center justify-content-between me-2">
        <mat-icon>palette</mat-icon>
        <span class="text-muted">|</span>
      </span>
      <input
        matInput
        [(colorPicker)]="foreColor"
        [style.background]="foreColor"/>
    </mat-form-field>

    <mat-form-field>
      <span
        matPrefix
        matTooltip="Hyperlink color"
        class="d-flex flex-nowrap align-items-center justify-content-between me-2">
        <mat-icon>palette</mat-icon>
        <span class="text-muted">|</span>
      </span>
      <input
        matInput
        [(colorPicker)]="linkColor"
        [style.background]="linkColor"/>
    </mat-form-field>

  </div>

  <div class="mt-3">

    <mat-checkbox
      [(ngModel)]="follow_up"
      labelPosition="before"
      class="me-3"
      matTooltip="Have the chatbot suggest follow up questions"
      color="primary">Follow up</mat-checkbox>

    <mat-checkbox
      [(ngModel)]="search"
      labelPosition="before"
      class="me-3"
      matTooltip="Have the chatbot show references or citations"
      color="primary">References</mat-checkbox>

    <mat-checkbox
      [(ngModel)]="rtl"
      labelPosition="before"
      class="me-3"
      matTooltip="Right to left languages, such as Arabic, Hebrew, Farsi, etc"
      color="primary">RTL</mat-checkbox>

    <mat-checkbox
      [(ngModel)]="clear_button"
      labelPosition="before"
      class="me-3"
      matTooltip="Add a 'clear chat button' to your chatbot"
      color="primary">Clear</mat-checkbox>

    <mat-checkbox
      [(ngModel)]="copy_button"
      labelPosition="before"
      class="me-3"
      matTooltip="Add a 'copy response button' to your chatbot's messages"
      color="primary">Copy</mat-checkbox>

    <mat-checkbox
      [(ngModel)]="new_tab"
      labelPosition="before"
      class="me-3"
      matTooltip="Have the chatbot open up all links in a new browser tab"
      color="primary">New tab</mat-checkbox>

    <mat-checkbox
      [(ngModel)]="code"
      labelPosition="before"
      class="me-3"
      matTooltip="Have the chatbot display highlighted code"
      color="primary">Code</mat-checkbox>

    <mat-checkbox
      [(ngModel)]="sticky"
      labelPosition="before"
      class="me-3"
      matTooltip="Opens the chatbot during navigation if it's already been opened on the previous page"
      color="primary">Sticky</mat-checkbox>

    <mat-checkbox
      [(ngModel)]="history"
      labelPosition="before"
      class="me-3"
      matTooltip="The chatbot will remember conversations users have with it, and allow the user to continue or go back to these"
      color="primary">History</mat-checkbox>

    <mat-checkbox
      [(ngModel)]="attachments"
      labelPosition="before"
      matTooltip="Allows user to upload PDF documents and images during conversations"
      color="primary">Attachments</mat-checkbox>

  </div>

</div>

<div mat-dialog-actions [align]="'end'">

  <a
    *ngIf="landing_page"
    mat-flat-button
    target="_blank"
    [href]="getLandingPage()">
    Demo
  </a>

  <button
    mat-button
    (click)="embedUrl()">
    Copy URL
  </button>

  <button
    mat-button
    (click)="embed()">
    Copy HTML
  </button>

  <button
    mat-flat-button
    color="primary"
    mat-dialog-close>
    Close
  </button>

</div>
